<template>
  <div class="app-container">
    <!-- 搜索框 -->
    <div class="navSearchBox">
    <el-input v-model="searchID" class="input-with-select searchContent" placeholder="请输入用户ID" style="width: 40%">
      <el-button slot="append" class="searchButton" icon="el-icon-search" @click="onSubmit()" />
    </el-input>
  </div>
     <el-card class="box-card-info" shadow="always" style="width: 100%">
       <div slot="header" class="clearfix">
         <span style=" float:left;font-weight:bold">客户信息</span>
       </div>
       <el-form ref="form" :inline="true" style="text-align: left">
         <el-row :gutter="20">
           <el-col :span="8">
             <el-form-item label="用户ID: ">
               {{ userForm.custId }}
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="登记姓名:">
               {{ userForm.custName }}
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="卡号:">
               {{ userForm.serialNum }}
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="手机号码:">
               {{ userForm.contactPhone }}
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="入网时间:">
               {{ userForm.createTime }}
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="入网年限:">
               {{ userForm.duration }}
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="是否欠费:">
               {{ userForm.custStatus }}
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="所属区域:">
               {{ userForm.fullAddr }}
             </el-form-item>
           </el-col>
         </el-row>
       </el-form>
     </el-card>
     <div class="echartsBox">
       <el-card class="chartBox userLevelBox">
         <div slot="header" class="clearfix">
           <span style=" float:left;font-weight:bold">客户画像</span>
         </div>
         <!-- 头像 -->
         <el-row>
           <!--<el-col :span="6">
             <div class="userIcon"><img src="@/assets/usericon.png" alt=""></div>
           </el-col>-->
           <!-- 标签 -->
           <el-col :span="18">
             <div class="tagBox">
               <h4 class="title">客户属性</h4>
               <div class="box">
                 <span v-for="(item, index) in tagTable.userAttribute" :key="index11" style="margin-left: 10px">
                   <el-tag :span="6">{{ item }}</el-tag>
                 </span>
               </div>
             </div>
             <div class="tagBox">
               <h4 class="title">收视行为</h4>
               <div class="box">
                 <span v-for="(item, index) in tagTable.viewsBehavior" :key="index11" style="margin-left: 10px">
                   <el-tag>{{ item }}</el-tag>
                 </span>
               </div>
             </div>
             <div class="tagBox">
               <h4 class="title">业务属性</h4>
               <div class="box">
                 <span v-for="(item, index) in tagTable.businessAttribute" :key="index11" style="margin-left: 10px">
                   <el-tag style="margin-left: 10px">{{ item }}</el-tag>
                 </span>
               </div>
             </div>
           </el-col>
         </el-row>
       </el-card>
     </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      listLoading: false,
      userForm: {},
      searchID: '',
      userTag: {},
      tagTable: {
        userAttribute: [],
        businessAttribute: [],
        viewsBehavior: []
      },
      flag: true
    }
  },
  methods: {
    onSubmit() {
      this.$message('submit!')
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
</style>

